<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="会话安全" name="sessionSafe">
      <el-form :model="sessionSafeForm" label-width="auto" v-loading="sessionSafeLoading" style="max-width: 600px">
          <el-form-item label="登录密码最大尝试次数">
            <el-input v-model="sessionSafeForm.maxAttemps" />
          </el-form-item>
          <el-form-item label="锁定时长（秒）">
            <el-input v-model="sessionSafeForm.lockSecond" />
          </el-form-item>
          <el-form-item label="锁定检测时间窗口（秒）">
            <el-input v-model="sessionSafeForm.checkWindow" />
          </el-form-item>
          <el-form-item label="会话超时（小时）">
            <el-input v-model="sessionSafeForm.sessionTimeout" />
          </el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
      </el-form>
    </el-tab-pane>

    <el-tab-pane label="黑名单地址" name="blackIP">
      <el-button type="primary" @click="popupBlackIPAdd = true">
      <el-icon><DocumentAdd /></el-icon>
        黑名单地址
      </el-button>
      <el-table :data="blackIPtableData" v-loading="blackIPLoading" >
        <el-table-column prop="ip" label="IP"/>
        <el-table-column prop="created_at" label="创建时间"  />
      </el-table>
    </el-tab-pane>

    <el-tab-pane label="密码安全" name="passwordSafe">
      <el-form :model="SafeForm" label-width="auto" v-loading="passwordSafeLoading" style="max-width: 600px">
        <el-form-item label="密码最小长度">
          <el-input v-model="SafeForm.length" />
        </el-form-item>
        <el-form-item label="密码包含">
          <el-checkbox-group v-model="SafeForm.category">
            <el-checkbox value="0" name="type">
              大写字母
            </el-checkbox>
            <el-checkbox value="1" name="type">
              小写字母
            </el-checkbox>
            <el-checkbox value="2" name="type">
              数字
            </el-checkbox>
            <el-checkbox value="3" name="type">
              特殊字符
              <el-tooltip 
                content="特殊符号包含: !@#*()-_+=" 
                placement="top">
                <el-icon class="help-icon"><QuestionFilled /></el-icon>
              </el-tooltip>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="SafeForm.enabled" />
        </el-form-item>
      </el-form>
    </el-tab-pane>

    <el-tab-pane label="安全水印" name="waterMark">
      <el-form :model="WaterMark" label-width="auto" style="max-width: 600px">
        <el-form-item label="启用">
          <el-switch v-model="WaterMark.enabled" />
        </el-form-item>
          <el-form-item label="自定义水印内容">
            <el-input v-model="WaterMark.content" />
          </el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('sessionSafe')
const popupBlackIPAdd = ref(false)

const sessionSafeLoading = ref(false)
const blackIPLoading = ref(false)
const passwordSafeLoading = ref(false)

const sessionSafeForm = ref({
  maxAttemps: 3,
  checkWindow: 60,
  lockSecond: 180,
  sessionTimeout: 24
})
const blackIPtableData = ref([])
const SafeForm = ref({
  length: 0,
  category: [],
  enabled: false
})

const WaterMark = ref({
  enabled: false,
  content: null
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const save = () => {
  console.log('a')
}

</script>

<style>
</style>
